import React, {Component} from 'react';
import { StyleSheet, TextInput ,Text, View, ActivityIndicator,ScrollView } from 'react-native';
import { ListItem,Divider,Button,Image } from 'react-native-elements'
import Ionicons from 'react-native-vector-icons/Ionicons';
import {NovelContext} from './NovelContext';
import Api from './Api';

export default class NovelIndex extends React.Component {
    static navigationOptions = ({ navigation }) => {
        return {
            title: '首页',
            headerRight: (
                <Button
                onPress = {() => navigation.navigate('Search')}
                icon={
                    <Ionicons
                    name="ios-search"
                    size={25}
                    color="#2089dc"
                />
                }
                type='clear'
                />
                ),
        }
    };
  
    state = { data:[],loaded:false }
    
    initHome = () => {
        Api.indexNovel()
            .then((res) => {
                this.setState({
                    data:res,
                    loaded:true
                })
            })
    }

    componentDidMount(){
        this.initHome()
    }

    render() {
        let {loaded,data} = this.state
        return (
          <View style={{ flex: 1,padding:10,}}>
            {loaded ?
                <View>
                    <View style={{ height:50,}}>
                        <View style={{justifyContent: 'center',alignItems: "center",flex:1,flexDirection: 'row'}}>
                            <ScrollView horizontal>
                            {
                                data.categories.map((l, i) => (
                                    <Text 
                                    onPress={() => this.props.navigation.navigate('Category',{
                                        url:l.href,
                                        title:l.title
                                    })}
                                    style={{ width:80,height:40,fontSize:18,textAlign:'center',justifyContent:'center'}} key={i}>{l.title}</Text>
                                ))
                            }
                            </ScrollView>
                        </View>
                    </View>
                    <ScrollView>
                    <View style={{borderLeftWidth:2,marginBottom:15,borderLeftColor:'silver'}}>
                        <Text style={{fontSize:18,paddingLeft:10,}}>好书推荐</Text>
                    </View>
                        {
                            data.hot_sales.map((l,i)=>(
                                <ListItem key={`${i}`}
      title={l.title}
      onPress={() => this.props.navigation.navigate('Detail',{
        url:l.href,
        title:l.title
    })}
      subtitle={
        <View>
          <Text>{l.author}</Text>
          <Text>{l.review}</Text>
        </View>
      }
      leftAvatar={<Image source={{uri:l.cover}} style={{width:90,height:122,}}/> }
    />
                            ))
                        }
                        {
                            data.s_lists.map((l, i) => (
                                <View key={l.type} style={{marginTop:5}}>
                                    <View style={{borderLeftWidth:2,marginBottom:15,marginTop:15,borderLeftColor:'silver'}}>
                                        <Text style={{fontSize:18,paddingLeft:10,}}>{l.type}</Text>
                                    </View>
                                    {
                                        l.lists.map((ll,ii)=>(
                                            <ListItem
                                                containerStyle={{
                                                    backgroundColor:ii%2===0?'#FFF':'#F7F7F7'
                                                }}
                                                key={ll.href}
                                                onPress={() => this.props.navigation.navigate('Detail',{
                                                    url:ll.href,
                                                    title:ll.title
                                                })}
                                                title={ll.title}
                                                rightIcon={
                                                    <Ionicons
                                                        name="ios-arrow-forward"
                                                        size={15}
                                                        color="#2089dc"
                                                        />
                                                }
                                            />
                                        ))
                                    }
                                </View>
                            ))
                        }
                        <Divider style={{height:40,backgroundColor:'#FFFFFF'}}/>
                    </ScrollView>
                </View>
                :
                <View style={styles.horizontal}>
                    <ActivityIndicator size="small" color="#00ff00" />
                    <Text>Loading...</Text>
                </View>
            }
          </View>
        );
    }
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection: "row",
      justifyContent: "center",
      alignItems: "center",
      paddingLeft:5,
      paddingRight:5,
    },
    horizontal: {
      flex: 1,
      justifyContent: 'center',
      alignItems: "center",
      flexDirection: 'column',
      padding: 10
    },
    rightContainer: {
      flex: 1,
      alignItems:"flex-start",
      paddingLeft: 10,
    },
    title: {
      fontSize: 18,
      marginBottom: 8
    },
    year: {
      textAlign: "center"
    },
    thumbnail: {
      width: 53,
      height: 81
    },
    list: {
      paddingTop: 20
    }
  });
